import {Chart, Coord, Point, Polygon, Tooltip, View} from 'viser-react'
import * as React from 'react'
import {apiPrefix} from 'config'

const tooltipOpts = {
  showTitle: false,
  itemTpl: '<tr data-index={index}>' +
  '<td style="padding: 10px">{name}</>' +
  '<td style="padding: 10px">{value}</td>' +
  '</tr>',
  g2Tooltip: {
    borderRadius: '4px',
    padding: 10,
  },
}

const scale = [{
  dataKey: 'x',
  sync: true,
  nice: false,
}, {
  dataKey: 'y',
  sync: true,
  nice: false,
}]

export default class App extends React.Component {
  render () {
    const {geoData, data} = this.props
    return (
      <div style={{width: 530, height: 390}}>
        <Chart forceFit height={350} padding={[0, 20, 0]} scale={scale}>
          <Coord type="rect" direction="TL"/>
          <Tooltip {...tooltipOpts} />
          <View data={geoData} scale={scale}>
            <Polygon position="x*y" style={{
              fill: '#ddd',
              stroke: '#b1b1b1',
              lineWidth: 0.5,
              fillOpacity: 0.85,
            }} tooltip={false}/>
          </View>
          <View data={data}>
            <Point position="x*y" size={['deaths', [2, 30]]} opacity={0.45}
                   color="#FF2F29" tooltip="成交额*地理位置"
                   shape="circle"
            />
          </View>
        </Chart>
      </div>
    )
  }
}


